const template = document.createElement("template");

template.innerHTML = /*html*/ `
<style>
:host {
  width: 1em;
  height: 1em;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

svg {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
<svg>
  <use href="../../components/IconSvg/pause.svg#pause" />
</svg>
`;

class IconSvg extends HTMLElement {
  static observedAttributes = ["name"];
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: "closed" });
    const content = template.content.cloneNode(true);
    const name = this.getAttribute("name");

    this.baseUrl = new URL('./', import.meta.url).href;
    this.svgUse = content.querySelector("svg use")
    this.svgUse.setAttribute("href", `${this.baseUrl}/${name}.svg#${name}`);

    if (this.getAttribute("color")) this.style.color = this.getAttribute("color");
    shadow.appendChild(content);
  }

  attributeChangedCallback(name, oldValue, newValue){
    if(name === "name"){
      this.svgUse.setAttribute("href", `${this.baseUrl}/${newValue}.svg#${newValue}`);
    }
  }
}

customElements.define("icon-svg", IconSvg);
